<template>
  <div class="navBar">
    <div class="item" v-for="(item,index) in nav" :key="index" @click="selectNav(item.page)">
      <span><img :src="isSelect==item.page?item.url1:item.url"></span>
      <span :class="isSelect==item.page?'active':''">{{item.title}}</span>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        isSelect: 'home',
        nav: [{
            title: '首页',
            page: "home",
            url: require('../assets/index/navBarHome.png'),
            url1: require('../assets/index/navBarHome1.png')
          },
          {
            title: '分类',
            page: "category",
            url: require('../assets/index/navBarCategory.png'),
            url1: require('../assets/index/navBarCategory1.png')
          },
          {
            title: '购物车',
            page: "car",
            url: require('../assets/index/navBarShopCar.png'),
            url1: require('../assets/index/navBarShopCar1.png')
          },
          {
            title: '我的',
            page: "user",
            url: require('../assets/index/navBarUser.png'),
            url1: require('../assets/index/navBarUser1.png')
          }
        ]
      }
    },
    mounted() {
      this.isSelect = this.$route.page
    },
    methods: {
      selectNav(page) {
        this.isSelect = page
        switch (page) {
          case 'home':
            this.$router.push('/home')
            break
          case 'category':
            this.$router.push('/category')
            break
          case 'car':
            this.$router.push('/car')
            break
          case 'user':
            this.$router.push('/user')
            break
        }
      }
    }
  };
</script>


<style scoped>
  .navBar {
    position: fixed;
    z-index: 9;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3rem;
    /* 横向盒子模型 */
    display: flex;
    justify-content: space-between;
    border-top: 0.1rem solid #e8e8e8;
  }
  .navBar .item {
    padding-top: 0.4rem;
    width: 25%;
    display: flex;
    flex-flow:column;
  }
  .item img {
    height: 1.30rem;
    width: 1.30rem;
  }
  .item span {
    font-size: 0.75rem;
  }
  .item .active {
    color: #e21323;
  }
</style>

